/**
在 JavaScript 的响应式系统中，依赖收集是实现数据变化时自动更新视图的关键机制。在 Vue 3 中，依赖收集的实现主要依赖于一些核心类和方法。以下是对响应式依赖收集相关类的说明总结：

  1. ReactiveEffect 类
  - 定义： `ReactiveEffect`  是 Vue 3 中用于管理副作用（即响应式函数）的核心类。它负责收集依赖和触发更新。
  - 功能：
    - 依赖收集：在执行副作用函数时， `ReactiveEffect`  会记录当前的依赖（即被访问的响应式属性）。
    - 触发更新：当依赖的响应式属性发生变化时， `ReactiveEffect`  会重新执行副作用函数，从而更新视图。

  2. Track 和 Trigger 方法
  - Track：该方法用于在访问响应式属性时进行依赖收集。它会将当前的  `ReactiveEffect`  实例注册到对应属性的依赖列表中。
  - Trigger：该方法用于在响应式属性发生变化时触发更新。它会遍历依赖列表，调用所有依赖的  `ReactiveEffect`  实例，从而执行相应的副作用。

  3. Proxy 类
  - 定义： `Proxy`  是 JavaScript 的一个内置对象，用于创建一个代理对象，以拦截对目标对象的操作（如属性访问、赋值等）。
  - 功能：
    - 拦截操作：通过  `Proxy` ，Vue 3 可以拦截对响应式对象的属性访问和修改，从而实现依赖收集和触发更新。
    - 实现响应式：在创建响应式对象时，Vue 3 会使用  `Proxy`  来包装对象，使其具有响应式特性。

  4. Ref 类
  - 定义： `Ref`  是 Vue 3 中用于创建基本数据类型的响应式引用的类。
  - 功能：
    - 创建引用：通过  `ref`  函数，可以创建一个响应式的引用对象，内部使用  `ReactiveEffect`  进行依赖收集。
    - 访问和修改：使用  `.value`  属性来访问和修改引用的值，同时会自动进行依赖收集和更新。

  5. Computed 类
  - 定义： `Computed`  是 Vue 3 中用于创建计算属性的类。
  - 功能：
    - 依赖追踪：计算属性会自动收集其依赖的响应式属性，并在这些属性变化时重新计算值。
    - 缓存机制：计算属性的值会被缓存，只有在依赖的响应式属性发生变化时才会重新计算，提高性能。

  总结
  在 Vue 3 的响应式系统中，依赖收集的核心类包括  `ReactiveEffect` 、 `Ref` 、 `Computed`  和使用的  `Proxy` 。这些类和方法共同实现了对响应式数据的管理，使得数据变化时能够自动更新视图。理解这些类的作用和实现机制，对于深入掌握 Vue 3 的响应式系统至关重要。
 */
class Depend {
  constructor() {
    this.reactiveFns = []
  }
  // 添加依赖
  addDepend(reactiveFn) {
    if (reactiveFn) {
      this.reactiveFns.push(reactiveFn)
    }
  }

  // notify: 通知更新
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn()
    })
  }
}

const obj = {
  name: 'responsive',
  age: 18,
}

const depend = new Depend()

function effect(fn) {
  depend.addDepend(fn)
  fn()
}

function foo() {
  console.log('foo', obj.name, obj.age)
}

function bar() {
  console.log('bar', obj.name, obj.age)
}

effect(foo)
effect(bar)

console.log("name发生变化-----------------------")
obj.name = 'hello'
depend.notify()

console.log("age发生变化-----------------------")
depend.notify()

console.log("name发生变化-----------------------")
obj.name = "james"
depend.notify()
